<%@ page language="java" contentType="text/html; charset=UTF-8"
	pageEncoding="UTF-8"%>
	
<%
String path = request.getContextPath(); 
request.setAttribute("path", path);
%>
<!DOCTYPE html PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN" "http://www.w3.org/TR/html4/loose.dtd">
<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=UTF-8">
<title>ssm</title>

<script type="text/javascript" language="javascript" src="js/jquery-1.9.1.min.js"></script>
<script type="text/javascript" language="javascript" src="js/jquery.form.js"></script>

<style type="text/css">
li {
	list-style-type: none;
}
a{
	text-decoration:none
}
/*a  upload */
.a-upload {
    padding: 4px 10px;
    height: 20px;
    line-height: 20px;
    position: relative;
    cursor: pointer;
    color: #888;
    background: #fafafa;
    border: 1px solid #ddd;
    border-radius: 4px;
    overflow: hidden;
    display: inline-block;
    *display: inline;
    *zoom: 1
}

.a-upload  input {
    position: absolute;
    font-size: 100px;
    right: 0;
    top: 0;
    opacity: 0;
    filter: alpha(opacity=0);
    cursor: pointer
}

.a-upload:hover {
    color: #444;
    background: #eee;
    border-color: #ccc;
    text-decoration: none
}
</style>

</head>
<body>
	<form name="fileForm" id="fileForm" action="user/file/uploadFile1?tocken=09980687362898123995020726059692"
		enctype="multipart/form-data" method="post">
		<ul>
			<li>
				<a href="javascript:;" class="a-upload">
					<input type="text" value="" name="fileInput">
			   		<input type="file" name="file">上传文件
				</a>
			</li>
		</ul>
		<ul>
			<li><input type="button" id="ajaxSubmit" value="上传"> </li>
		</ul>
		<ul>	
			<li><a href="${path }/user/file/getFileList?tocken=09980687362898123995020726059692">查看已上传文件</a></li>
		</ul>
		<ul>
			<li>结果：<p id="result"></p><p id='message'></p></li>
		</ul>
	</form>
</body>

<script src="http://cdn.sockjs.org/sockjs-0.3.min.js"></script>  
<script type="text/javascript">
	$(function() {
		$("#ajaxSubmit").on("click", function() {
			console.log($(this));
			$("#fileForm").ajaxSubmit({
				type : 'post',
				url : 'user/file/uploadFile1?tocken=09980687362898123995020726059692',
				success : function(data) {
					console.log(data);
					$("#result").html(data);
				},
				error : function(XmlHttpRequest, textStatus, errorThrown) {
					console.log(XmlHttpRequest);
					console.log(textStatus);
					console.log(errorThrown);
				}
			});
		});
	});
</script>

<script type="text/javascript">  
$(function(){
	

    var websocket = null;  
      
    //判断当前浏览器是否支持WebSocket  
    if('WebSocket' in window){  
        websocket = new WebSocket("ws://localhost:88/ssi/websocket/test");  
    }  
    else{  
        alert('Not support websocket')  
    }  
       
    //连接发生错误的回调方法  
    websocket.onerror = function(){  
        setMessageInnerHTML("error");  
    };  
       
    //连接成功建立的回调方法  
    websocket.onopen = function(event){  
        setMessageInnerHTML("open");  
    }  
       
    //接收到消息的回调方法  
    websocket.onmessage = function(){  
        setMessageInnerHTML(event.data);  
    }  
       
    //连接关闭的回调方法  
    websocket.onclose = function(){  
        setMessageInnerHTML("close");  
    }  
       
    //监听窗口关闭事件，当窗口关闭时，主动去关闭websocket连接，防止连接还没断开就关闭窗口，server端会抛异常。  
    window.onbeforeunload = function(){  
        websocket.close();  
    }  
       
    //将消息显示在网页上  
    function setMessageInnerHTML(innerHTML){  
        document.getElementById('message').innerHTML += innerHTML + '<br/>';  
    }  
       
    //关闭连接  
    function closeWebSocket(){  
        websocket.close();  
    }  
       
    //发送消息  
    function send(){  
        var message = document.getElementById('text').value;  
        websocket.send(message);  
    }  
});   
</script>  
</html>